import Vue from 'vue'
import VueRouter from 'vue-router'
// 在 VueCLI 创建的项目中 @ 表示 src 目录
// 它是 src 目录的路径别名
// 好处：它不受当前文件路径影响
// 注意：@ 就是 src 路径，后面别忘了写那个斜杠
// 使用建议：如果加载的资源路径就在当前目录下，那就正常写
//       如果需要进行父级路径查找的都使用 @
import Login from '@/views/login'
import Home from '@/views/home'
import Layout from '@/views/layout'
import Article from '@/views/article'
import Publish from '@/views/publish'
import Image from '@/views/image'
import Comment from '@/views/comment'
import Settings from '@/views/settings'

Vue.use(VueRouter)
// 路由配置表
const routes = [{
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      title: '头条登陆'
    }
  },
  {
    path: '/',
    // 命名路由 layout 有一个默认子路由，这个名字没有意义，所以警告
    // 正确的做法是：如果有默认子路由，就不要给父路由起名字了
    // name: 'layout',
    name: 'layout',
    component: Layout,
    children: [{
        // 我们通常会把根路径 / 设置为网站的首页
        // 为啥呢？因为我们在手动输入网址访问网站的时候，可以省略 /
        // 如果你是别的名称，则必须加上
        path: '', // path 为空，会作为默认子路由渲染

        // 路由的名字是干啥的？
        // 参考：https://gitee.com/lipengzhou/toutiao-publish-admin/issues/I1F1BA
        name: 'home',
        component: Home,
        meta: {
          title: '头条管理'
        }
      },
      {
        path: '/article',
        name: 'article',
        component: Article,
        meta: {
          title: '头条内容'
        }
      },
      {
        path: '/publish',
        name: 'publish',
        component: Publish,
        meta: {
          title: '头条发布'
        }
      },
      {
        path: '/image',
        name: 'image',
        component: Image,
        meta: {
          title: '头条素材'
        }
      },
      {
        path: '/comment',
        name: 'comment',
        component: Comment,
        meta: {
          title: '头条评论'
        }
      },
      {
        path: '/settings',
        name: 'settings',
        component: Settings,
        meta: {
          title: '头条设置'
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 路由守卫
// 路由导航守卫（拦截器）的作用就是控制页面的访问状态
// beforeEach 是全局前置守卫，任何页面的访问都要经过这里
// 路由导航守卫：说白了所有页面的导航都会经过这里
// 守卫页面的导航的
// to：要去的路由信息
// from：来自哪里的路由信息
// next：放行方法
router.beforeEach((to, from, next) => {
  // 如果要访问的页面不是 /login，校验登录状态
  // 如果没有登录，则跳转到登录页面
  // 如果登录了，则允许通过
  // 允许通过
  // next()
  const user = JSON.parse(window.localStorage.getItem('user'))
  // 检验登陆页面的登陆状态,是否允许通过
  if (to.path !== '/login') {
    if (user) {
      next()
    } else {
      next('/login')
    }
  } else {
    // 登录页面，正常允许通过
    next()
  }
})
// 我们在组件中使用的 this.$router 其实就是这个模块中的 router
export default router
